<template>
	<view class="order-list-page">
		<!-- 订单状态切换 -->
		<scroll-view scroll-x class="order-tabs">
			<view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{active: activeTab === tab.value}"
				@click="activeTab = tab.value">
				<text>{{tab.label}}</text>
				<view class="tab-badge" v-if="tab.count">{{tab.count}}</view>
			</view>
		</scroll-view>

		<!-- 订单列表 -->
		<scroll-view scroll-y class="order-list">
			<template v-if="orders.length">
				<order-card v-for="(order, index) in orders" :key="index" :order="order"
					@click="handleOrderClick(order)"></order-card>
			</template>

			<view v-else class="empty">
				<image src="/static/empty-order.png" class="empty-img"></image>
				<text class="empty-text">暂无订单</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'all',
				tabs: [{
						label: '全部',
						value: 'all',
						count: 5
					},
					{
						label: '待付款',
						value: 'unpaid',
						count: 1
					},
					{
						label: '进行中',
						value: 'ongoing',
						count: 2
					},
					{
						label: '待评价',
						value: 'unreviewed',
						count: 1
					},
					{
						label: '已完成',
						value: 'completed',
						count: 1
					},
					{
						label: '已取消',
						value: 'canceled',
						count: 0
					}
				],
				orders: [],
				activeTab: 'all',
				page: 1,
				pageSize: 10,
				hasMore: true,
				loading: false
			}
		},
		onLoad(options) {
			this.activeTab = options.status || 'all'
			this.loadOrders()
		},
		methods: {
			async loadOrders() {
				if (this.loading) return

				this.loading = true
				uni.showLoading({
					title: '加载中...'
				})

				const userId = uni.getStorageSync('user_id')

				try {
					const orderObj = uniCloud.importObject('order')
					const res = await orderObj.getOrderList(
						userId,
						this.activeTab,
						this.page,
						this.pageSize
					)

					if (res.code === 0) {
						this.orders = this.page === 1 ?
							res.data :
							[...this.orders, ...res.data]

						this.hasMore = res.data.length >= this.pageSize
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} catch (e) {
					uni.showToast({
						title: '加载订单失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
					uni.hideLoading()
				}
			},

			// 加载更多
			onReachBottom() {
				if (this.hasMore && !this.loading) {
					this.page++
					this.loadOrders()
				}
			},

			// 切换状态
			switchTab(status) {
				if (this.activeTab === status) return

				this.activeTab = status
				this.page = 1
				this.orders = []
				this.hasMore = true
				this.loadOrders()
			},

			// 查看订单详情
			viewOrderDetail(orderId) {
				uni.navigateTo({
					url: `/pages/order/detail?id=${orderId}`
				})
			}
		}
	}
</script>

<style lang="scss">
	$primary-color: #FF7F00;

	.order-list-page {
		background: #f8f8f8;
		min-height: 100vh;
	}

	.order-tabs {
		white-space: nowrap;
		padding: 15px 15px 10px;
		background: #fff;

		.tab-item {
			display: inline-block;
			padding: 0 15px 10px;
			margin-right: 20px;
			position: relative;
			font-size: 15px;

			&.active {
				color: $primary-color;
				font-weight: bold;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 20px;
					height: 3px;
					background: $primary-color;
					border-radius: 2px;
				}
			}
		}

		.tab-badge {
			position: absolute;
			top: -5px;
			right: 0;
			min-width: 18px;
			height: 18px;
			background: #FF5722;
			color: #fff;
			border-radius: 9px;
			font-size: 11px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 4px;
		}
	}

	.order-list {
		padding: 0 15px;
		height: calc(100vh - 110px);
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60px 0;

		.empty-img {
			width: 150px;
			height: 150px;
			margin-bottom: 20px;
		}

		.empty-text {
			font-size: 15px;
			color: #999;
			margin-bottom: 30px;
		}

		.empty-btn {
			width: 200px;
			height: 44px;
			background: $primary-color;
			border-radius: 22px;
			color: #fff;
			font-size: 16px;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>